<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>面试题管理</el-breadcrumb-item>
      <el-breadcrumb-item>面试题列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row :gutter="20">

        <el-col :span="4">
          <el-select v-model="pageInfo.mstSelId" placeholder="请选择面试题分类">
            <el-option
              v-for="item in mstselInfo"
              :key="item.id"
              :label="item.mstSelName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="8">
          <el-input
            placeholder="请输入内容"
            v-model="pageInfo.key"
            clearable
            @clear="clearClick()"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="keyCilck"
            ></el-button>
          </el-input>
        </el-col>
        <el-col :span="8">
          <el-button @click="addMstInfo" type="primary">添加</el-button>
          <el-button @click="delAllMst" type="danger">删除</el-button>
          <el-button @click="down" type="primary">下载</el-button>
        </el-col>
      </el-row>

      <el-table
        @selection-change="handleSelectionChange"
        :data="mstInfoData"
        style="width: 100%"
        :stripe="true"
        border
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="mstInfoTitle" label="面试题标题">
        </el-table-column>

        <el-table-column prop="mstInfoDes" label="面试题描述">
        </el-table-column>

        <el-table-column prop="mstInfoSort" label="面试题排序">
        </el-table-column>

        <el-table-column prop="mstInfoCreatetime" label="面试题创建时间">
        </el-table-column>

        <el-table-column prop="score" label="面试题点击量"> </el-table-column>

        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="primary" @click="editMstInfo(scope.row.id)"
              >修改</el-button
            >
            <el-button @click="delMstInfo(scope.row.id)" type="danger"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.pageNum"
        :page-sizes="[10, 20, 50]"
        :page-size="pageInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>

    <el-dialog
      title="修改面试题"
      :visible.sync="editDialogVisible"
      width="50%"
      :before-close="editHandleClose"
    >
      <el-form
        ref="editFormRef"
        :model="editForm"
        label-width="100px"
        :rules="editRules"
      >
        <el-form-item label="面试题标题:" prop="mstInfoTitle">
          <el-input v-model="editForm.mstInfoTitle"></el-input>
        </el-form-item>
        <el-form-item label="面试题描述:" prop="mstInfoDes">
          <el-input v-model="editForm.mstInfoDes"></el-input>
        </el-form-item>
        <el-form-item label="面试题排序:" prop="mstInfoSort">
          <el-input v-model.number="editForm.mstInfoSort"></el-input>
        </el-form-item>
        <el-form-item label="面试题分类:" prop="mstSelId">
          <!-- <el-input v-model="addForm.mstSelId"></el-input> -->
          <el-select v-model="editForm.mstSelId" placeholder="请选择">
            <el-option
              v-for="item in mstsel"
              :key="item.id"
              :label="item.mstSelName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editFormClick"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { getMstInfo, delMstInfo, getMstInfoById, editMstInfo, down } from '@/api/mstInfo/index'
import { getMstSelList } from '@/api/mstsel/index'
export default {
  // import 引入的组件需要注入到对象中才能使用
  name: 'mstInfo',
  components: {},
  props: {},
  data () {
    // 这里存放数据
    return {
      mstsel: [],
      editRules: {
        mstInfoTitle: [
          { required: true, message: '请输入面试题标题', trigger: 'blur' }
        ],
        mstInfoDes: [
          { required: true, message: '请输入面试题描述', trigger: 'blur' }
        ],
        mstSelId: [
          { required: true, message: '请输入面试题分类', trigger: 'blur' }
        ],
        mstInfoSort: [
          { required: true, message: '请输入面试题分类', trigger: 'blur' }
        ]
      },
      editForm: {},
      editDialogVisible: false,
      mstInfoData: [],
      multipleSelection: [],
      pageInfo: {
        pageSize: 10,
        pageNum: 1,
        key: '',
        mstSelId: ''
      },
      total: 0,
      mstselInfo: []
    }
  },
  // 计算属性 类似于 data 概念
  computed: {},
  // 监控 data 中的数据变化
  watch: {},
  // 方法集合
  methods: {
    async down () {
      await down()
    },
    editFormClick () {
      this.$refs.editFormRef.validate(async (valid) => {
        if (!valid) return false
        const res = await editMstInfo(this.editForm)
        this.editDialogVisible = false
        this.$refs.editFormRef.resetFields()
        this.$message.success(res.data)
        this.getData()
      })
    },
    editHandleClose () {
      this.$refs.editFormRef.resetFields()
      this.editDialogVisible = false
    },
    async delAllMst () {
      const ids = this.multipleSelection.map((item) => {
        return item.id
      })
      // console.log(ids)
      const res = await delMstInfo(ids)
      this.$message.success(res.data)
      this.multipleSelection = []
      this.getData()
    },
    async delMstInfo (id) {
      const ids = []
      ids.push(id)
      const res = await delMstInfo(ids)
      this.$message.success(res.data)
      this.getData()
    },
    async editMstInfo (id) {
      const res = await getMstInfoById(id)
      this.editForm = res.data
      const ress = await getMstSelList()
      this.mstsel = ress.data
      this.editDialogVisible = true
    },
    async getMstSel () {
      const res = await getMstSelList()
      this.mstselInfo = res.data
    },
    keyCilck () {
      this.getData()
    },
    clearClick () {
      this.pageInfo.key = ''
      this.getData()
    },
    addMstInfo () {
      this.$router.push('/addMstInfo')
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    async getData () {
      const res = await getMstInfo(this.pageInfo)
      this.mstInfoData = res.data.list
      this.total = parseInt(res.data.total)
    },
    handleSizeChange (newPageSize) {
      this.pageInfo.pageSize = newPageSize
      this.getData()
    },
    handleCurrentChange (newPageNum) {
      this.pageInfo.pageNum = newPageNum
      this.getData()
    }
  },
  // 生命周期 - 创建完成（可以访问当前 this 实例）
  created () {},
  // 生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted () {
    this.getData()
    this.getMstSel()
  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有 keep-alive 缓存功能，这个函数会触发
}
</script>
<style lang='less' scoped>
//@import url(); 引入公共 css 类
</style>
